<template>
  <div class="community-page">
    <h2 class="section-title">花艺社区</h2>
    <p class="section-description">与其他花艺爱好者分享您的作品和经验</p>
    
    <div class="community-posts">
      <div class="post-card" v-for="post in posts" :key="post.id">
        <div class="post-header">
          <div class="post-author">
            <div class="author-avatar"></div>
            <div class="author-info">
              <h3 class="author-name">{{ post.author }}</h3>
              <p class="post-time">{{ post.time }}</p>
            </div>
          </div>
        </div>
        <p class="post-content">{{ post.content }}</p>
        <div class="post-image" v-if="post.hasImage"></div>
        <div class="post-actions">
          <button class="action-btn">
            <span>👍 {{ post.likes }}</span>
          </button>
          <button class="action-btn">
            <span>💬 {{ post.comments }}</span>
          </button>
          <button class="action-btn">
            <span>🔄 分享</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowerCommunity',
  data() {
    return {
      posts: [
        {
          id: 1,
          author: '花艺达人',
          time: '2小时前',
          content: '今天完成了一束混合花束，粉玫瑰搭配满天星，非常适合送给女朋友！',
          hasImage: true,
          likes: 24,
          comments: 5
        },
        {
          id: 2,
          author: '花语心情',
          time: '昨天',
          content: '分享一个保持鲜花更持久的小技巧：每天更换花瓶中的水，并在水中加入少量白糖和醋。',
          hasImage: false,
          likes: 56,
          comments: 12
        },
        {
          id: 3,
          author: '绿植爱好者',
          time: '3天前',
          content: '刚刚在花漾定制完成了我的第一个DIY花束，非常满意！感谢店员的耐心指导。',
          hasImage: true,
          likes: 89,
          comments: 15
        }
      ]
    };
  }
};
</script>

<style scoped>
.community-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.community-posts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.post-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-header {
  margin-bottom: 1rem;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
}

.author-name {
  font-size: 1rem;
  font-weight: bold;
}

.post-time {
  font-size: 0.8rem;
  color: #888;
}

.post-content {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.post-image {
  height: 200px;
  background-color: #e0e0e0;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.post-actions {
  display: flex;
  gap: 1rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.action-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #f0f0f0;
}
</style>